<script setup>
import {ref} from "vue";
import {
    FullScreen,
    HomeFilled,
    Memo,
    CollectionTag,
    List,
    CircleCheck,
    DocumentAdd,
    Tickets,
    Comment,
    Edit,
    Help,
    Calendar,
    Collection,
    Location,
    Operation,
    RefreshLeft,
    Setting,
    UserFilled, Iphone, Stamp
} from "@element-plus/icons-vue";
import screenfull from "screenfull";
import Content from "./components/content.vue";
import router from "../../router/index.js";
const isCollapse = ref(false)
const currentType = sessionStorage.getItem('type')
console.log(currentType)
// 放大屏幕
const fullScreen = () => {
    if (screenfull.isEnabled) {
        screenfull.toggle()
    }
}
// 刷新页面
const freshScreen=()=>{
    location.reload()
}
</script>

<template>
    <div class="viewMyClassInfo">
        <div class="common-layout">
            <el-container>
                <div class="menu_all">
                    <el-menu

                            class="el-menu-vertical-demo"
                            :collapse="isCollapse"
                            router="router"
                    >
                        <el-menu-item>
                            <el-icon><HomeFilled /></el-icon>
                            <span>智慧课堂</span>
                        </el-menu-item>
                        <!-- 学生模块 -->
                        <el-sub-menu index="1" v-if="currentType === '0' ">
                            <template #title>
                                <el-icon><Collection /></el-icon>
                                <span>我的课程</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/classStart/studentSchedule">
                                    <el-icon><Calendar /></el-icon>
                                    课程表
                                </el-menu-item>
                                <el-menu-item index="/classStart/studentsCourseInformation">
                                    <el-icon><Memo /></el-icon>
                                    课程信息
                                </el-menu-item>
                                <el-menu-item index="/classStart/courseGrades">
                                    <el-icon><Tickets /></el-icon>
                                    课程成绩
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        <el-sub-menu index="2" v-if="currentType === '0' ">
                            <template #title>
                                <el-icon><Help /></el-icon>
                                <span>请假</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/classStart/leaveInfo">
                                    <el-icon><Edit /></el-icon>
                                    请假
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        <el-sub-menu index="3" v-if="currentType === '0' ">
                            <template #title>
                                <el-icon>
                                    <location/>
                                </el-icon>
                                <span>计划中心</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/classStart/planView">
                                    <el-icon><List /></el-icon>
                                    个人计划
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        <el-menu-item index="/classStart/classMatesView" v-if="currentType === '0' ">
                            <el-icon><UserFilled /></el-icon>
                            <span>我的同学</span>
                        </el-menu-item>


                        <!--教师模块-->
                        <el-sub-menu index="4" v-if="currentType === '5' ">
                            <template #title>
                                <el-icon><Collection /></el-icon>
                                <span>我的课程</span>
                            </template>
                            <el-menu-item-group >
                                <el-menu-item index="/classStart/teacherSchedule">
                                    <el-icon><Calendar /></el-icon>
                                    课程表
                                </el-menu-item>
                                <el-menu-item index="/classStart/teacherCourseInfo">
                                    <el-icon><Memo /></el-icon>
                                    课程信息
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>


                        <!-- 管理员模块 -->
                        <el-sub-menu index="8" v-if="currentType === '2' ">
                            <template #title>
                                <el-icon><CollectionTag /></el-icon>
                                <span>公告</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/classStart/publishAnnounce">
                                    <el-icon><DocumentAdd /></el-icon>
                                    发布公告
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        <el-sub-menu index="5" v-if="currentType === '2' ">
                            <template #title>
                                <el-icon><Help /></el-icon>
                                <span>审批</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/classStart/adminManageLeaveView">
                                    <el-icon><CircleCheck /></el-icon>
                                    请假审批
                                </el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item index="/classStart/courseManageView">
                                <el-icon><Stamp /></el-icon>
                                <span>排课审批</span>
                            </el-menu-item>
                        </el-sub-menu>

                <!--公共模块-->
                        <el-menu-item index="/classStart/newAnnounceView">
                            <el-icon><Comment /></el-icon>
                            <span>最新公告</span>
                        </el-menu-item>
                        <el-menu-item index="/classStart/chatRoom" v-if="currentType === '2' || currentType === '0' || currentType === '5' " >
                            <el-icon><Iphone /></el-icon>
                            <span>聊天室</span>
                        </el-menu-item>
                    </el-menu>
                </div>
                <!-- 头部 -->
                <el-container>
                    <el-header>
                        <el-row type="flex" justify="start" align="middle">
                            <el-col :span="1">
                                <el-button @click="isCollapse = !isCollapse" type="primary" style="border: none;background-color: #f0f0f0;">
                                    <el-icon>
                                        <Operation />
                                    </el-icon>
                                </el-button>
                            </el-col>
                            <el-col :span="20">
                                <div class="myHead">
                                    <h1 style="color: cadetblue; display: inline-block; margin-left: 10px;">智慧课堂</h1>
                                    <div class="full-screen" style="display: inline-block; margin-left: 20px;">
                                        <el-icon size="20" color="cadetblue" @click="freshScreen">
                                            <RefreshLeft />
                                        </el-icon>
                                        <el-icon size="20" color="cadetblue" @click="fullScreen">
                                            <FullScreen />
                                        </el-icon>
                                        <el-button type="primary"
                                                   @click= "router.push('/')"
                                                   style="color:cadetblue;
                                                   background-color: #f0f0f0;
                                                   border: none;"
                                        >返回首页</el-button>
                                    </div>

                                </div>
                            </el-col>
                        </el-row>
                    </el-header>

                    <!-- 内容部分 -->
                    <el-main>
                        <content/>
                    </el-main>

                </el-container>

            </el-container>
        </div>
    </div>
</template>

<style scoped>
.myHead {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-aside {
    background-color: #f0f0f0;
}

.el-header {
    background-color: #f0f0f0;
    height: 56px;
    text-align: center;
}

.el-main {
    background-color: #e9eef3;
    height: 800px;
}

.el-menu {
    border-right: 0;
    background-color: #f0f0f0;
}

.el-icon {
    margin-right: 10px;
    cursor: pointer;
    color: black;
}

.menu_all {
    background-color: #f0f0f0;
}

.el-menu-item.is-active {
    background-color: #409EFF !important;
    color: #ffffff !important;
}



</style>